<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>个人预约信息管理</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<style type="text/css"></style>
</head>
<body>
	<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
		<table border="0" cellspacing="" cellpadding=""
			style="margin-left: 5px">
			<tr>
				<td align="left" width="500px" rowspan="4"><h2>当前预约信息</h2></td>
				<td height="30px"></td>
			</tr>
		</table>
		
		<div class="table-responsive">
			<table class="table table-striped">
				<thead>
					<tr class="info">
						<th>预约编号</th>
						<th>用户编号</th>
						<th>座位编号</th>
						<th>预定开始时间</th>
						<th>预定结束时间</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<!-- 如果属性范围内的list为null，我们就跳转到ReservationServlet去获取数据，然后再转发回来 -->
					<c:if test="${list==null}">
						<!-- c:redirect 跳转到 ReservationServlet -->
						<c:redirect url="ReservationServlet?op=queryreservation"></c:redirect>
					</c:if>
					<!-- 如果 范围内的list不为空，遍历数据并展示结果 -->
					<c:if test="${list!=null}">
						<c:forEach items="${list}" var="reservation">
							<tr>
								<td>${pageScope.reservation.resid}</td>
								<td>${reservation.userid}</td>
								<td>${reservation.eseatno}</td>
								<td>${reservation.restime}</td>
								<td>${reservation.resetime}</td>
								<td><a class="del" href="#">取消预约</a></td>

							</tr>
						</c:forEach>
					</c:if>
				</tbody>
			</table>
		</div>
	</div>
	</div>

	<style>
		.uinfo {
			width: 200px;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
	</style>

	<script src="${pageContext.request.contextPath}/js/jquery-2.0.3.js"></script>
	<script src="layui/layui.js" charset="utf-8"></script>
	<script>
		layui.use(['laypage', 'layer'], function(){
		  	var laypage = layui.laypage
		  	,layer = layui.layer;
		  
		});
		
		//点击取消预约--》
		$(".del").click(function() {
			var userid = $(this).parents("tr").find("td").eq(1).text();
			var eseatno = $(this).parents("tr").find("td").eq(2).text();
			//询问框
			layer.confirm('确认取消预约吗？', {
				btn : [ '确认', '取消' ]
			//按钮
			}, function() {
				$.ajax({
					url : "ReservationServlet",
					type : "post",
					data : {
						userid : userid,
						eseatno : eseatno,
						op : "delreservation"
					},
					dataType : "json",
					success : function(res) {
						console.log("res:" + res);
						if (res == true) {
							console.log("成功");
							layer.alert('取消成功！', {
								icon : 1,
							  yes: function(layero, index){
								  location.href="ReservationServlet?op=queryreservation";
								  }
							});
						} else {
							console.log("失败");
							layer.alert('取消失败！', {
								icon : 1,
							  yes: function(layero, index){
								  location.href="ReservationServlet?op=queryreservation";
								  }
							});
						
					}
				}
				});

			});
		});
	</script>
</body>
</html>